<template>
    <div>
        <van-sticky>
            <van-nav-bar title="商品列表" left-text="返回" left-arrow
                @click-left="() => { $router.push('/home/classify') }" />
        </van-sticky>
        <van-skeleton v-if="pd" v-for="item in 7">
            <template #template>
                <div :style="{ display: 'flex', width: '100%' }">
                    <van-skeleton-image />
                    <div :style="{ flex: 1, marginLeft: '16px' }">
                        <van-skeleton-paragraph row-width="60%" />
                        <van-skeleton-paragraph />
                        <van-skeleton-paragraph />
                        <van-skeleton-paragraph />
                    </div>
                </div>
            </template>
        </van-skeleton>

        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <router-link :to="'/detail/' + item.goods_id" v-for="item in list">
                    <van-card :price="item.goods_price" :title="item.goods_name"
                        :thumb="item.goods_big_logo ? item.goods_big_logo : 'https://ts4.cn.mm.bing.net/th?id=OIP-C.ygQGtHfTu-yKG2FEomqXSwHaHa&w=249&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2'" />
                </router-link>
            </van-list>
        </van-pull-refresh>

    </div>
</template>

<script setup>
import { showToast } from 'vant';
import { reactive, ref } from 'vue'
import { useRoute } from 'vue-router';
import axios from '../request/index'
let pd=ref(true)
const route = useRoute()
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const num = reactive({
    pagenum: 1,
    pagesize: 7
})
const total = ref(0)

const onLoad = () => {
    if (refreshing.value) {
        list.value = [];
        refreshing.value = false;
        num.pagenum = 1
        total.value = 0
    }
    const zd = Math.ceil(total.value / num.pagesize)
    if (zd == 0) {
        console.log('初始化进入');
    }
    else {
        if (num.pagenum >= zd) {
            showToast('没有更多了')
            finished.value = true
            return
        } else {
            num.pagenum++
        }
    }
    axios.get('https://api-hmugo-web.itheima.net/api/public/v1/goods/search', {
        params: {
            cid: route.query.cid,
            ...num
        }
    }).then(res => {
        setTimeout(()=>{
            list.value = list.value.concat(res.data.message.goods)
            loading.value = false
            total.value = res.data.message.total
            pd.value=false
        },500)
    })
};

const onRefresh = () => {
    // 清空列表数据
    finished.value = false;

    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    loading.value = true;
    onLoad();
};



</script>

<style lang="scss" scoped></style>